<template>
  <div class="game-container">
    <div class="game-table">
      <div v-for="(player, index) in players" :key="player.id" 
           :class="['player-position', `position-${index}`]">
        <div class="player-info">
          <span>{{ player.name }}</span>
          <span v-if="player.ready" class="ready-badge">已准备</span>
        </div>
        <div class="player-cards" v-if="player.id === currentPlayerId">
          <div class="hand front-hand">
            <div v-for="(card, idx) in frontHand" :key="idx" 
                 class="card" @click="selectCard(card, 'front')">
              {{ card.suit }} {{ card.rank }}
            </div>
          </div>
          <div class="hand middle-hand">
            <div v-for="(card, idx) in middleHand" :key="idx" 
                 class="card" @click="selectCard(card, 'middle')">
              {{ card.suit }} {{ card.rank }}
            </div>
          </div>
          <div class="hand back-hand">
            <div v-for="(card, idx) in backHand" :key="idx" 
                 class="card" @click="selectCard(card, 'back')">
              {{ card.suit }} {{ card.rank }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="game-controls">
      <el-button type="primary" @click="submitHand" 
                 :disabled="!canSubmit">提交牌型</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useWebSocket } from '@/composables/useWebSocket'
import type { Card, Player } from '@/types'

const props = defineProps<{
  roomId: string
  currentPlayerId: string
}>()

const { sendMessage } = useWebSocket()

const frontHand = ref<Card[]>([])
const middleHand = ref<Card[]>([])
const backHand = ref<Card[]>([])
const players = ref<Player[]>([])

const canSubmit = computed(() => {
  return frontHand.value.length === 3 && 
         middleHand.value.length === 5 && 
         backHand.value.length === 5
})

const selectCard = (card: Card, hand: 'front' | 'middle' | 'back') => {
  // TODO: 实现卡牌选择逻辑
}

const submitHand = () => {
  sendMessage('/app/submitHand', {
    roomId: props.roomId,
    playerId: props.currentPlayerId,
    frontHand: frontHand.value,
    middleHand: middleHand.value,
    backHand: backHand.value
  })
}
</script>

<style scoped>
.game-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.game-table {
  flex: 1;
  position: relative;
  background: #1a6c3b;
  border-radius: 50%;
  margin: 20px;
}

.player-position {
  position: absolute;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  color: white;
}

.position-0 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.position-1 { top: 10%; left: 50%; transform: translateX(-50%); }
.position-2 { top: 50%; right: 10%; transform: translateY(-50%); }
.position-3 { bottom: 10%; left: 50%; transform: translateX(-50%); }

.player-cards {
  margin-top: 10px;
}

.hand {
  display: flex;
  gap: 5px;
  margin: 5px 0;
}

.card {
  width: 40px;
  height: 60px;
  background: white;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.ready-badge {
  background: #67c23a;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 5px;
}

.game-controls {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style> 